<h1>Suggestions on Authorization Rules Change</h1>
<p><%= navigation %></p>
<div style="display:none" id="suggest-graph-container">
<%= link_to_function "Hide", "$(this).up().hide()", :class => 'important' %>
<%= link_to_function "Toggle stacked roles", "toggle_graph_params('suggest-graph', 'stacked_roles');" %>
<%= link_to_function "Toggle only users' roles", "toggle_graph_params('suggest-graph', 'only_relevant_roles');" %><br/>
<object id="suggest-graph" data="" type="image/svg+xml" style="max-width: 98%;max-height: 95%;margin-top: 0.5em"/>
</div>
<%= render 'show_graph' %>

<style type="text/css">
  .action-options label { display: block; float: left; width: 7em; padding-bottom: 0.5em }
  .action-options label.inline { display: inline; float: none }
  .action-options select { float: left; }
  .action-options br { clear: both; }
  .action-options { margin-bottom: 2em }
  .change-options { margin-bottom: 1em }
  .change-options td.user_id { display: none }
  .change-options td { padding-right: 1em; padding-left: 0.5em }
  .change-options thead td { border-bottom: 1px solid lightgrey }
  .change-options thead td.choose { text-align: center; font-weight: bold }
  .change-options tr.permitted td.yes,
  .change-options tr.not-permitted td.no { background: #FFE599 }
  .submit { margin-top: 0 }
  .submit input { font-weight: bold; font-size: 120% }
  #suggest-result { 
    position: absolute; left: 55%; right: 10px;
    border-left: 1px solid grey;
    padding-left: 2em;
    z-index: 10;
  }
  #suggest-result>ul { padding-left: 0 }
  #suggest-result>ul>li { list-style: none;  margin-bottom: 1em }
  #suggest-result>ul>li.secondary { padding-left: 2em }
  #suggest-result li { padding-left: 0 }
  #suggest-result ul ul { padding-left: 2em }
  #suggest-result .ord { float: left; display: block; width: 2em; font-weight: bold; color: grey }
  .show-approach, .show-others-in-group { visibility: hidden }
  .prohibit { text-decoration: none; visibility: hidden }
  li:hover .show-approach, li:hover .prohibit,
    li:hover .show-others-in-group { visibility: visible }
  #suggest-graph-container {
    background: white; border:1px solid grey;
    position:fixed; z-index: 20;
    left:10%; bottom: 10%; right: 10%; top: 10%;
    padding: 0.5em
  }
  #graph-container {
    background: white; margin: 1em; border:1px solid grey; padding: 0.5em;
    max-width:50%; position:fixed; z-index: 20; right:0;
  }
  .unimportant, .remove, .prohibit { color: grey }
  .important { font-weight: bold }
  .remove { cursor: pointer }
</style>
<% javascript_tag do %>
    function suggest_changes (refresh) {
        if (!refresh)
          $("suggest-result").innerHTML = "Searching...";
        $("suggest-result").show();
        new Ajax.Updater({success: 'suggest-result'}, '<%= suggest_change_authorization_rules_path %>', {
            method: 'get',
            onFailure: function(request) {
                $("suggest-result").innerHTML = "Error while searching."
            },
            parameters: $H($('change').down('form').serialize(true)).merge(refresh ? {show_all: "true"} : {}).toQueryString()
        });
        if (!refresh)
          location.hash = 'suggest-result';
    }

    function show_suggest_graph (changes, filter_roles_params, filter_context, user_ids) {
        var params = {changes: changes, highlight_privilege: $F('privilege')};
        if (filter_context)
          params['filter_contexts'] = filter_context;
        if (user_ids)
          params['user_ids[]'] = user_ids;
        show_graph_with_params('suggest-graph', params);
    }

    document.observe('dom:loaded', function() {
      install_change_observers();
    });

    function install_change_observers () {
        $$('#change select').each(function (el) {
            el.observe('change', function (event) {
                var form = $('change').down('form');
                new Ajax.Updater({success: 'change'}, '<%= url_for %>', {
                  parameters: Form.serializeElements(form.select('select').concat(form.getInputs('radio', 'affected_users')), true),
                  method: 'get',
                  onComplete: function () {
                      install_change_observers();
                      if ($('graph-container').visible())
                        show_current_permissions();
                  }
                });
            });
        });
        $('prohibited_actions').observe('click', function (event) {
          var target = event.findElement();
          if (target.hasClassName('remove')) {
            target.up().remove();
            if ($('prohibited_actions').childElements().length == 0)
              $('prohibited_actions').previous().hide();
            suggest_changes();
          }
        });
    }

    function show_current_permissions () {
        show_graph($F('privilege'), $F('context')/*, relevant_user_ids()*/);
    }

    function show_all_groups () {
      $$('#suggest-result>ul>li.primary').invoke("show");
    }

    function show_group_approaches (group_no) {
      $$('#suggest-result>ul>li.secondary.group-' + group_no).invoke("show");
      $$('#suggest-result>ul>li.primary.group-' + group_no + ' a.show-others-in-group').invoke("hide");
    }

    function hide_group_approaches (group_no) {
      $$('#suggest-result>ul>li.secondary.group-' + group_no).invoke("hide");
      $$('#suggest-result>ul>li.primary.group-' + group_no + ' a.show-others-in-group').invoke("show");
    }

    function relevant_user_ids () {
      return $$('#change .user_id').collect(function (el) {
        return el.innerHTML;
      }).reject(function (id) {
        return $('user_' + id + '_permission_undetermined').checked;
      });
    }

    var prohibited_action_template =
        new Template('<li>#{description} <span class="remove">[x]</span><input type="hidden" name="prohibited_action[]" value="#{action}"></li>');
    function prohibit_action (action, description) {
      $('prohibited_actions').previous().show();
      $('prohibited_actions').insert(
          {bottom: prohibited_action_template.evaluate({action: action, description: description}) }
      );
      suggest_changes(true);
    }
<% end %>

<div id="suggest-result" style="display:none"></div>

<div id="change">
  <%= render 'change' %>
</div>
